Slide Menu em CSS

Um efeito bem interessante para um menu em html

HTML

<script type=”text/javascript” language=”javascript” src=”focus_slide.js”></script>

<ul id=”mContainer”>
<li><a href=”#” title=”Item One”>Item One</a></li>
<li><a href=”#” title=”Item Two”>Item Two</a></li>
<li><a href=”#” title=”Item Three”>Item Three</a></li>
<li><a href=”#” title=”Item Four”>Item Four</a></li>
<li><a href=”#” title=”Item Five”>Item Five</a></li>
</ul>

JavaScript(salve em um arquivo com o nome focus_slide.js)

/******************************************************
Focus Slide
version 1.0
last revision: 12.17.2004
steve@slayeroffice.com

Should you improve upon or
modify this code, please let me know
so that I can update the version hosted
at slayeroffice.

PLEASE LEAVE THIS NOTICE INTACT!

******************************************************/

//window.onload = init;

var d=document;        // shortcut reference to the document object
var activeLI = 0;        // the currently “active” list element – value represents its index in the liObj array
var zInterval = null;    // interval variable

var SLIDE_STEP = 8;    // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;    // the width of the sliding div. used to calculate its left based on the width and left of the active LI element

function init() {
// bail out if this is an older browser or Opera which gets the offsets wrong
// the opera issue is fixable by subtracting the container UL’s width from the offsetLefts…but I dont care enough to do it
// this does NOT break opera, it just wont get the sliding thing

if(!document.getElementById || window.opera)return;

// create references to the LI’s
mObj = d.getElementById(“mContainer”);
liObj = mObj.getElementsByTagName(“li”);

// set up the mouse over events
for(i=0;i<liObj.length;i++) {
liObj[i].xid = i;
liObj[i].onmouseover = function() { initSlide(this.xid); }
}

// create the slider object
slideObj = mObj.appendChild(d.createElement(“div”));
slideObj.id = “slider”;

// position the slider over the first LI
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3)-5;
y = liObj[activeLI].offsetTop-3;
slideObj.style.top = y + “px”;
slideObj.style.left = x + “px”;
}

function initSlide(objIndex) {
// return if the user is mousing over the currently active LI
if(objIndex == activeLI)return;
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
clearInterval(zInterval);

// set the active list item to the object index argument
activeLI = objIndex;
// figure out the destination for the sliding div element
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3))-5;
// start the interval
intervalMethod = function() { doSlide(destinationX); }
zInterval = setInterval(intervalMethod,10);
}

function doSlide(dX) {
// get the current left of the sliding div
x = slideObj.offsetLeft;
if(x+SLIDE_STEP<dX) {
// div is less than its destination, move it to the right
x+=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else if (x-SLIDE_STEP>dX) {
// div is more than its destination, move to the left
x-=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else  {
// div is within the boundaries of its destination. put it where its supposed to be
// and clear the interval
slideObj.style.left = dX + “px”;
clearInterval(zInterval);
zInterval = null;
}
}

CSS

#mContainer {
position:relative;
margin:0 auto;
height:25px;
background-color:#F1F1F1;
border-bottom:2px solid #E2E2E2;
text-align:center;
padding:5px 0 0 0;
}

#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0;
z-index:2;
}

#mContainer li a         {text-decoration:none;}
#mContainer li a:link    {color:#999;}
#mContainer li a:visited {color:#333;}
#mContainer li a:hover      {color:#DA0911;}

#slider {
position:absolute;
/*background-color:#CFDCFF;
border:1px solid #78919B;*/
border-bottom:3px solid #DA0911;
width:74px;
height:20px;
padding:0;
z-index:1;
}

Fonte: http://www.infectedfx.net/